<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/home/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeName" @tab-click="changeType" type="border-card">
      <el-tab-pane label="菜单权限管理" name="menu">
        <!-- 搜索框 -->
        <el-form :inline="true" class="searchForm">
          <el-form-item>
            <el-input v-model="keyword" clearable placeholder="请输入要搜索的关键字" @clear="clear"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="add" plain icon="el-icon-plus">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="dels" plain icon="el-icon-close" v-show="select.length!=0">批量删除</el-button>
          </el-form-item>
        </el-form>
        <!-- 表单 -->
        <el-table :data="menuList" border stripe @selection-change="selectionChange" v-loading="loading" height="550px">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="权限名称" prop="menuName" min-width="150px" align="center"></el-table-column>
          <el-table-column label="权限标识" prop="menuKey" min-width="250px" align="center"></el-table-column>
          <el-table-column label="路由地址" prop="path" align="center" min-width="200px"></el-table-column>
          <el-table-column label="图标" prop="icon" align="center" min-width="200px">
            <template slot-scope="scope">
              <i :class="scope.row.icon"></i>
            </template>
          </el-table-column>
          <el-table-column label="禁用状态" prop="status" align="center" min-width="100px">
            <template slot-scope="scope">
              <el-switch disabled v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="父菜单" prop="pid" align="center" min-width="150px">
            <template slot-scope="scope">
              <span v-if="scope.row.parent==null">根菜单</span>
              <span v-else>{{scope.row.parent.menuName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-s-tools">编辑</el-button>
              <el-button size="mini" type="danger" @click="remove(scope.row)" icon="el-icon-close">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination :current-page="page.page" :total="page.total" background layout="prev, pager, next" @current-change="currentChange">
        </el-pagination>

      </el-tab-pane>
      <el-tab-pane label="资源权限管理" name="power">
        <!-- 搜索框 -->
        <el-form :inline="true" class="searchForm">
          <el-form-item>
            <el-input v-model="keyword" clearable placeholder="请输入要搜索的关键字" @clear="clear"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="add" plain icon="el-icon-plus">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="dels" plain icon="el-icon-close" v-show="select.length!=0">批量删除</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="menuList" border stripe @selection-change="selectionChange" v-loading="loading" height="550px">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="权限名称" prop="menuName" min-width="150px" align="center"></el-table-column>
          <el-table-column label="权限标识" prop="menuKey" min-width="250px" align="center"></el-table-column>
          <el-table-column label="禁用状态" prop="status" align="center" min-width="100px">
            <template slot-scope="scope">
              <el-switch disabled v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-s-tools">编辑</el-button>
              <el-button size="mini" type="danger" @click="remove(scope.row)" icon="el-icon-close">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="page.page" :total="page.total" background layout="prev, pager, next" @current-change="currentChange">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑" :visible.sync="dialogEdit" center v-loading="loading">
      <el-form class="form" :model="form" label-left label-width="100px" :rules="rules" ref="editForm">
        <el-form-item label="权限名称" prop="menuName">
          <el-input v-model.trim="form.menuName"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="menuKey">
          <el-input v-model.trim="form.menuKey"></el-input>
        </el-form-item>
        <el-form-item label="路由地址" v-show="activeName==='menu'">
          <el-input v-model.trim="form.path"></el-input>
        </el-form-item>
        <el-form-item label="图标" v-show="activeName==='menu'">
          <el-input v-model.trim="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio v-model="form.type" label="power">资源权限</el-radio>
          <el-radio v-model="form.type" label="menu">菜单权限</el-radio>
        </el-form-item>
        <el-form-item label="父菜单" v-show="activeName==='menu'">
          <el-select v-model="form.pid" placeholder="请选择">
            <el-option key="0" label="根菜单" :value="0"></el-option>
            <el-option v-for="item in menus" :key="item.id" :label="item.menuName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doEdit('editForm')">确 定</el-button>
        <el-button @click="dialogEdit = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加对话框 -->
    <el-dialog title="新增" :visible.sync="dialogAdd" center v-loading="loading">
      <el-form class="form" :model="form" label-left label-width="100px" :rules="rules" ref="addForm">
        <el-form-item label="权限名称" prop="menuName">
          <el-input v-model.trim="form.menuName"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="menuKey">
          <el-input v-model.trim="form.menuKey"></el-input>
        </el-form-item>
        <el-form-item label="路由地址">
          <el-input v-model.trim="form.path"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model.trim="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio v-model="form.type" label="power">资源权限</el-radio>
          <el-radio v-model="form.type" label="menu">菜单权限</el-radio>
        </el-form-item>
        <el-form-item label="父菜单">
          <el-select v-model="form.pid" placeholder="请选择">
            <el-option key="0" label="根菜单" :value="0"></el-option>
            <el-option v-for="item in menus" :key="item.id" :label="item.menuName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doAdd('addForm')">确 定</el-button>
        <el-button @click="dialogAdd = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  adminMenuListApi,
  adminEditMenuApi,
  adminAddMenuApi,
  adminDelMenuApi,
  adminDelsMenuApi,
} from "@/api/admin.js";
export default {
  inject: ["reload"],
  data() {
    return {
      activeName: "menu", //类型名称
      menuList: [], //菜单列表
      page: {
        page: 1,
        limit: 10,
        total: 0,
      },
      select: [], //选择的数据
      loading: false,
      form: {}, //表单数据
      keyword: "", //关键字
      dialogEdit: false, //显示编辑对话款
      dialogAdd: false, //显示编辑对话款
      menus: [], //根菜单
      rules: {
        menuName: {
          required: true,
          message: "请输入权限名称",
          trigger: "blur",
        },
        menuKey: { required: true, message: "请输入权限标识", trigger: "blur" },
        type: { required: true, message: "请选择类别", trigger: "blur" },
      },
    };
  },
  methods: {
    //选择的权限类型改变
    changeType() {
      this.getMenuList();
    },
    //获取权限列表
    getMenuList(
      page = this.page.page,
      limit = this.page.limit,
      type = this.activeName,
      keyword = this.keyword
    ) {
      let queryParam = {
        page,
        limit,
        type,
        keyword,
      };
      adminMenuListApi(queryParam)
        .then((res) => {
          this.loading = true;
          const result = res.data;
          if (result.status === 200) {
            const menuList = result.data.content;
            //将数status中的1和0 转换为true 和false
            menuList.map((menu) => {
              menu.status = menu.status == 1 ? true : false;
              return menu;
            });
            this.menuList = menuList;
            this.page.total = result.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //获取根组件
    getMenusList(page = this.page.page, limit = 999, type = "menu") {
      let queryParam = {
        page,
        limit,
        type,
      };
      adminMenuListApi(queryParam).then((res) => {
        const result = res.data;
        if (result.status == 200) {
          const menuList = result.data.content;
          //过滤根菜单
          this.menus = menuList.filter((menu) => {
            if (menu.pid == 0) {
              return menu;
            }
          });
        }
      });
    },
    //选择
    selectionChange(e) {
      this.select = e;
    },
    //分页
    currentChange(e) {
      this.page.page = e;
      this.getMenuList();
    },
    //编辑
    edit(e) {
      this.form = e;
      this.dialogEdit = true;
    },
    //执行编辑操作
    doEdit(e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          this.form.status = this.form.status ? 1 : 0;
          adminEditMenuApi(this.form)
            .then((res) => {
              this.loading = true;
              const result = res.data;
              if (result.status == 200) {
                this.$message.success("修改成功");
              } else {
                this.$message.error(result.msg);
              }
            })
            .finally(() => {
              this.loading = false;
              this.dialogEdit = false;
              this.reload();
            });
        }
      });
    },
    //添加
    add() {
      this.form = {};
      this.form.status = true;
      this.dialogAdd = true;
    },
    //添加逻辑
    doAdd(e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          this.form.status = this.form.status ? 1 : 0;
          adminAddMenuApi(this.form)
            .then((res) => {
              this.loading = true;
              const result = res.data;
              if (result.status == 200) {
                this.$message.success("添加成功");
              } else {
                this.$message.error(result.msg);
              }
            })
            .finally(() => {
              this.loading = false;
              this.dialogAdd = false;
              this.reload();
            });
        }
      });
    },
    //删除
    remove(e) {
      this.$confirm("确认要删除吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          adminDelMenuApi({ id: e.id })
            .then((res) => {
              const result = res.data;
              if (result.status == 200) {
                this.$message.success("删除成功");
              } else {
                this.$message.error(result.msg);
              }
            })
            .finally(() => {
              this.reload();
            });
        })
        .catch(() => {
          return;
        });
    },
    //批量删除
    dels() {
      const ids = this.select.map((menu) => {
        return menu.id;
      });
      const data = { ids };
      this.$confirm("确认要删除吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          adminDelsMenuApi(data)
            .then((res) => {
              const result = res.data;
              if (result.status == 200) {
                this.$message.success("删除成功");
              } else {
                this.$message.error(result.msg);
              }
            })
            .finally(() => {
              this.reload();
            });
        })
        .catch(() => {
          return;
        });
    },
    //搜索
    search() {
      this.getMenuList();
    },
    //清空文本框
    clear() {
      this.getMenuList();
    },
  },
  created() {
    this.getMenuList();
    this.getMenusList();
  },
};
</script>

<style  scoped>
.el-tabs {
  margin-top: 50px;
}
.el-pagination {
  float: right;
  margin: 20px;
}
.searchForm {
  margin-left: 100px;
}
.form {
  padding: 20px 50px;
}
.form .el-form-item {
  width: 300px;
  margin: 20px auto;
}
</style>